<template>
  <div>
    <!-- 搜索框 -->
    <van-search
      v-model="value"
      fixed
      background="#fff0"
      :label="lable"
      placeholder="请输入搜索关键词"
    >
      <template #lable>
        <div @click="onSearch" class="right">
          <van-icon name="map-marked" color="#fff" size="0.53rem" />
        </div>
      </template>
    </van-search>

    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in imgList" :key="item.id">
        <img :src="url + item.imgSrc" alt="" />
      </van-swipe-item>
    </van-swipe>

    <!-- 选择项 -->
    <van-grid>
      <van-grid-item color="#ee0a24">
        <div><van-icon name="wap-home-o" /></div>
        <span>整租</span>
      </van-grid-item>
      <van-grid-item color="#ee0a24">
        <div><van-icon name="friends-o" /></div>
        <span>合租</span>
      </van-grid-item>
      <van-grid-item color="#ee0a24">
        <div><van-icon name="map-marked" @click="MapFn"/></div>
        <span>地图找房</span>
      </van-grid-item>
      <van-grid-item color="#ee0a24" @click="toFn">
        <div><van-icon name="wap-home" /></div>
        <span>去出租</span>
      </van-grid-item>
    </van-grid>

    <!-- 租房小组 -->
    <div class="group">
      <div class="flax">
        <div class="left">租房小组</div>
        <div class="right">更多</div>
      </div>
      <div class="shangpin">
        <div class="livehouse">
          <div>
            <img :src="url+this.group[0].imgSrc" alt="">
          </div>
          <div class="livehousesy">
            <div>{{this.group[0].title}}</div>
            <div>{{this.group[0].desc}}</div>
          </div>
        </div>
         <div class="livehouse">
          <div>
            <img :src="url+this.group[1].imgSrc" alt="">
          </div>
          <div class="livehousesy">
            <div>{{this.group[1].title}}</div>
            <div>{{this.group[1].desc}}</div>
          </div>
        </div>
      </div>
           <div class="shangpin">
        <div class="livehouse">
          <div>
            <img :src="url+this.group[2].imgSrc" alt="">
          </div>
          <div class="livehousesy">
            <div>{{this.group[2].title}}</div>
            <div>{{this.group[2].desc}}</div>
          </div>
        </div>
         <div class="livehouse">
          <div>
            <img :src="url+this.group[3].imgSrc" alt="">
          </div>
          <div class="livehousesy">
            <div>{{this.group[3].title}}</div>
            <div>{{this.group[3].desc}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入请求接口
import { imgAPI, groupsAPI } from '@/api'
// import store from '@/store'
import { Toast } from 'vant'
export default {
  data () {
    return {
      value: '',
      lable: localStorage.getItem('city') || '城市',
      imgList: [],
      url: 'http://liufusong.top:8080',
      modeList: [], // 户型
      lc: [], // 楼层
      cx: [], // 朝向
      group: []
    }
  },
  async created () {
    // 轮播图请求接口
    const res = await imgAPI()
    // console.log(res)
    this.imgList = res.data.body
    // const  findList= JSON.parse(localStorage.getItem('findList')), // 存放筛选条件
    // 租房小组
    const res2 = await groupsAPI()
    this.group = res2.data.body
    // console.log(this.group)
  },
  methods: {
    // 地图找房
    MapFn () {
      this.$router.push({
        path: '/vueBaiduMap'
      })
    },
    // 点击去出租
    toFn () {
      if (localStorage.getItem('token')) {
        console.log('跳转到发布房源页面')
        this.$router.push({
          path: '/torent'
        })
      } else {
        console.log('请登录')
        Toast('请先登录')
        this.$router.push({
          path: '/login'
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.van-search {
  margin-top: 0.39rem;
  margin-left: 0.6rem;
  width: 8.6rem;
  position: fixed;
  z-index: 1;
}
\deep\.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 0.5rem;
  text-align: center;
  /* background-color: #39a9ed; */
}
/deep/ .van-tabs__content {
  padding-top: 44px;
}
img {
  width: 100%;
  height: 5.2rem;
}
.van-grid-item__icon {
  color: aqua;
}
// 图标文字
.van-grid-item div {
  background-color: #f2fbf7;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: -0.2rem;
  border-radius: 50%;
}
.van-grid-item div .van-icon {
  font-size: 0.9rem;
  margin-left: 0.25rem;
  margin-top: 0.17rem;
  color: #35bf86;
}
.van-grid-item span {
  font-size: 0.33rem;
  margin-top: 0.2rem;
}
// 租房小组
.group {
  background-color: #f6f5f6;
  overflow: hidden;
  padding: 0 10px 0px 10px;
}
.flax {
  position: relative;
  margin: 5px 0 0px 10px;
  font-size: 15px;
  .left {
    position: relative;
    margin: 15px 0 15px 0px;
    font-size: 14px;
    font-weight: 400;
  }
  .right {
    color: #787d82;
    position: absolute;
    right: 0;
    margin-top: -0.94667rem;
    font-size: 14px;
    font-weight: 400;
  }
}
.shangpin {
  display: flex;
  overflow: hidden;
  margin-top: -10px;
  margin-bottom: 10px;
}
.van-card {
  width: 100px;
}
.van-card:not(:first-child) {
  margin-top: 0;
}
.livehouse{
  display: flex;
   font-size: 12px;
  margin: 10px 5px 0 5px;
  width: 180px;
  background-color: #fff;
}
.livehousesy{
  margin-top: 10px;
}
.livehouse img{
    width: 50px;
    height: 50px;
    margin: 2px 10px 0px;
}

</style>
